<template>
<div class="app-container">
  <div>
    <el-button type="primary" @click="dialogVisible1 = true">访客资料</el-button>
    <el-button type="success" @click="dialogVisible2 = true">实时访问</el-button>
    <el-button type="info" @click="dialogVisible3 = true">实时地图</el-button>
  </div>

  <el-dialog
    title="访客资料"
    :visible.sync="dialogVisible1"
    width="30%"
    :before-close="handleClose">
  <div id="widgetIframe3">
    <iframe width="100%"
            height="350"
            :src="'http://106.15.227.184/index.php?module=Widgetize&action=iframe&disableLink=0&widget=1&moduleToWidgetize=Live&actionToWidgetize=getVisitorProfilePopup&idSite=1&period=day&date=yesterday&disableLink=1&widget=1'+token"
            scrolling="yes"
            frameborder="0"
            marginheight="0"
            marginwidth="0">
    </iframe>
  </div>
    <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="dialogVisible1 = false">确 定</el-button>
  </span>
  </el-dialog>

  <el-dialog
    title="实时地图"
    :visible.sync="dialogVisible3"
    width="30%"
    :before-close="handleClose">
    <div id="widgetIframe">
      <iframe width="100%"
              height="350"
              :src="'http://106.15.227.184/index.php?module=Widgetize&action=iframe&disableLink=0&widget=1&moduleToWidgetize=UserCountryMap&actionToWidgetize=realtimeMap&idSite=1&period=day&date=yesterday&disableLink=1&widget=1'+token"
              scrolling="no"
              frameborder="0"
              marginheight="0"
              marginwidth="0">
      </iframe>
    </div>
    <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="dialogVisible3 = false">确 定</el-button>
  </span>
  </el-dialog>

  <el-dialog
    title="实时访问"
    :visible.sync="dialogVisible2"
    width="30%"
    :before-close="handleClose">
    <div id="widgetIframe2">
      <iframe width="100%"
              height="350"
              :src="'http://106.15.227.184/index.php?module=Widgetize&action=iframe&disableLink=0&widget=1&moduleToWidgetize=Live&actionToWidgetize=widget&idSite=1&period=day&date=yesterday&disableLink=1&widget=1'+token"
              scrolling="yes"
              frameborder="0"
              marginheight="0"
              marginwidth="0">
      </iframe>
    </div>
    <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="dialogVisible2 = false">确 定</el-button>
    </span>
  </el-dialog>

  <div class="left-content2">
    <div id="chartPie" class="pie-wrap"></div>
  </div>
  <div class="right-content2">
    <List  border size="large">
      <template slot="header">
        <h2 style="text-align:center; color: brown">排行榜</h2>
      </template>
        <ListItem v-for="item in accessList">
          <div v-bind:title="item.model">{{item.model}}:{{item.count}}</div>
        </ListItem>
    </List>
  </div>
</div>
</template>

<script>
import * as echarts from 'echarts';
import {access, requestBar} from "@/api/resourceAccess";
require('echarts/theme/macarons');//引入主题

export default {
  name: "resourceAccess",
  data() {
    return {
      token: '&token_auth=845434bb464e17745b540679ce8fe9a8',
      accessList: [],
      chartPie: null,
      dialogVisible1: false,
      dialogVisible2: false,
      dialogVisible3: false,
      data: []
    }
  },
  mounted() {
    requestBar().then(res => {
      this.data = res.body.data
      this.$nextTick(() => {
        this.drawPieChart();
      })
    })
    access().then(res => {
      this.accessList = res.body.data
    })
  },
  methods: {
    handleClose() {
      this.dialogVisible1 = false
      this.dialogVisible2 = false
      this.dialogVisible3 = false
    },
    drawPieChart() {
      let mytextStyle = {
        color: "#333",
        fontSize: 18,
      };
      let mylabel = {
        show: true,
        position: "right",
        offset: [30, 40],
        formatter: '{b} : {c} ({d}%)',
        textStyle: mytextStyle
      };
      this.chartPie = echarts.init(document.getElementById('chartPie'),'macarons');
      this.chartPie.setOption({
        title: {
          text: '请求类型饼状图',
          x: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          data: ['查询', '修改', '删除', '添加'],
          left:"center",
          top:"bottom",
          orient:"horizontal",
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            center: ['50%', '50%'],
            data: this.data,
            animationEasing: 'cubicInOut',
            animationDuration: 2600,
            label: {
              emphasis: mylabel
            }
          }
        ]
      });
    }
  }
}
</script>

<style scoped>
.pie-wrap{
  width:100%;
  height:400px;
}
.app-container{
  height: 100%;
}
/*left*/
.left-content2{
  height: 100%;
  width: 450px;
  float: left;
}
.left-content .left-content-title{
  width: 300px;
  display: block;
}
.left-content .left-content-text{
  width: 750px;
  position: relative;
  padding-top: 50px;
}
.left-content .left-content-text .button{
  position: absolute;
  top: 470px;
  left: 470px;
}
.left-content .left-content-text .x-button{
  position: absolute;
  top: 470px;
  left: 370px;
}
/*right*/
.right-content2{
  width: 550px;
  float: left;
  height: 100%;
  padding-left: 100px;
}
</style>
